<template>
    <div>
        <div class="examprepareBody">
            <div class="box">
                <div class="title">
                    <el-page-header  @back="goBack">
                        <template #content>
                        <span> {{form.title}} </span>
                        </template>
                    </el-page-header>
                </div>
                <div class="timeBox">
                    <div class="time" v-show="!form.begintime">
                        <p>开放时间</p>
                        <p class="bgtime">{{form.begintime?form.begintime.substr(0,16)+'至'+form.endtime.substr(0,16):'不限'}}</p>
                    </div>  
                </div>
                <div class="fractionBox">
                    <div class="testcount">
                        <span class="top">题目数量</span>
                        <span class="num">{{form.questions.length}}题</span>
                    </div>
                    <div class="soild"></div>
                    <div class="testcount">
                        <span class="top">考试时长</span>
                        <span class="num">{{form.limittime<=0?'不限':form.limittime+'min'}}</span>
                    </div>
                    <div class="soild"></div>
                    <div class="testcount">
                        <span class="top">考试总分</span>
                        <span class="num">{{form.scores}}分</span>
                    </div>
                    <div class="soild"></div>
                    <div class="testcount">
                        <span class="top">通过分数</span>
                        <span class="num">{{form.pastscores}}分</span>
                    </div>
                </div>
                
                <div class="buttonBox">
                    <el-button 
                    @click="startexam"
                     :disabled="form.begintime?(minutes<0||!isStart?true:false):false"
                     type="primary" 
                    >{{form.begintime
                    ?(minutes<0||!isStart)?
                    !isStart?
                    `${timer}开始考试`:
                    '不在开放时间内':
                    '开始考试':
                    '开始考试'}}
                    </el-button>
                    
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive ,toRefs} from "vue";
import { useRoute } from "vue-router";
import router from '../../router/router'
import {getTest} from '../../api/index'
import moment from "moment";
const route=useRoute()
// console.log(route.query.id);

const datas:any=reactive({
    id:0,
    timer:'',//倒计时
    isStart: false, // 是否可以考试
    form:{
        title:'',
        begintime: "",
        endtime: "",
        questions:[]
    }
})
const{form,isStart,timer}=toRefs(datas)
datas.id =route.query.id
// 计算当前时间是否过期
let minutes=moment(form.value.endtime).diff(moment(),'minutes')
// 倒计时
let timer1=setInterval(()=>{
    let timeing=moment()//获取当前时间
    let start=moment(new Date(form.value.begintime))//获取开始考试时间
    let diff=start.diff(timeing)//时间差
    timer.value=`${moment.duration(diff).hours()}:${moment.duration(diff).minutes()}:${moment.duration(diff).seconds()}`
    let awaitTime=Math.floor(diff/1000)
    if(awaitTime<=0){
        clearInterval(timer1)
        timer.value='00.00'
        isStart.value=true
    }
},10)

// 请求考试信息
const getText=async()=>{    
    let res:any=await getTest({id:datas.id})
    console.log(res);
    if(res.errCode===10000){
        datas.form=res.data
    }
    
}
getText()

// 点击开始考试
const startexam = ()=>{
  router.push({ name: "stuexam", query: { testid: datas.id } });
}

const goBack = () => {
  router.push('stutest')
}
</script>

<style scoped lang="less">
// 
.examprepareBody{
    width: 100%;
    height:100vh;
    background: url('http://edu.90000p.com/exam/cyx/assets/bg.bdbaa5ee.jfif') no-repeat;
    background-size: 100%;
    overflow: hidden;
    background-position: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    .box{
        width: 650px;
        background-color: #fff;
        padding: 50px 60px;

    }
    .timeBox{
        border-bottom: #e7e4e4 1px solid;
        margin-top: 25px;
        .time{
            padding: 0 50px 25px;
            .bgtime{
                font-size: 13px;
                margin-top: 5px;
            }
        }
    }
    .fractionBox{
        display: flex;
        justify-content:space-between;
        align-items: center;
        padding: 50px;
        .testcount{
            display: flex;
            flex-direction: column;
            align-items: center;
            .top{
                font-size: 14px;
                color: #999b9d;
            }
            .num{
                font-size: 30px;
            }
        }
        .soild{
            width: 1px;
            height: 70px;
            background-color: #e7e4e4;
        }
    }
    .buttonBox{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-button{
            width: 240px;
            height: 45px;   
        }
    }
}
</style>